<template>
  <div class="chart-mod" ref="chartUniversity"></div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref, Ref, watch} from "vue";
import { useECharts } from '@/hooks/web/useECharts'
import { universityLevelTotal } from '@/api/data-center/recruitment-progress.ts'
const chartUniversity = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartUniversity as Ref<HTMLDivElement>)

const props = defineProps({
  navInfo:{
    type:Object,
    default:{
      navIndex:0,
      checkNav:[],
      dateValue:{}
    }
  },
  selectedCity:{
    type:Object,
    default:{}
  }
})

const watchObj = watch(
  () =>props.navInfo,() => {getChartData()},{deep: true}
)

const watchSelectedCity = watch(
  () =>props.selectedCity,() => {getChartData()},{deep: true}
)

onMounted(() => {
  getChartData()
})

onUnmounted(()=>{
  watchObj()
  watchSelectedCity()
})

// 请求信息标记（用于对比异步请求）
let reqMark = null
/**
 * 获取高校分布图表数据
 */
const getChartData = async () => {
  const index = props.navInfo.navIndex || 0
  const reqJson = {
    "country": index===1?props.navInfo.checkNav[1].value:'',
    "province": index===2?props.navInfo.checkNav[2].value:'',
    "area": index===2?props.selectedCity.value:'',
    "year":props.navInfo.dateValue.year,
    "begin":props.navInfo.dateValue.beginTime,
    "end":props.navInfo.dateValue.endTime,
  }
  reqMark = reqJson
  const res = await universityLevelTotal(reqJson)
  if(reqMark===reqJson){
    initChart(res)
  }
}

/**
 * 初始化图表
 * @param data 接口返回的高校分布图表数据
 */
const initChart = (data) => {
  // C9数据
  const dataC9:Array<number> = [0,0,0,0,0,0,0,0,0,0]
  // A类型数据
  const dataTypeA:Array<number> = [0,0,0,0,0,0,0,0,0,0]
  // B类数据
  const dataTypeB:Array<number> = [0,0,0,0,0,0,0,0,0,0]
  // C类数据
  const dataTypeC:Array<number> = [0,0,0,0,0,0,0,0,0,0]
  // 匹配数据容器的策略模式对象
  const ArrayObj = {
    "C9":dataC9,
    "A":dataTypeA,
    "B":dataTypeB,
    "C":dataTypeC
  }
  data.forEach(item=>{
    if(!item.universityLevel)return
    ArrayObj[item.universityLevel][0] += Number(item.allEntryNum)
    ArrayObj[item.universityLevel][1] += Number(item.regularNum)
    ArrayObj[item.universityLevel][2] += Number(item.haveClassNum)
    ArrayObj[item.universityLevel][3] += Number(item.onDutyNum)
    ArrayObj[item.universityLevel][4] += Number(item.onJobNum)
    ArrayObj[item.universityLevel][5] += Number(item.waitEntryNum)
    ArrayObj[item.universityLevel][6] += Number(item.waitSignEntryNum)
    ArrayObj[item.universityLevel][7] += Number(item.departNum)
    ArrayObj[item.universityLevel][8] += Number(item.puaNum)
  })
  // 高校分布图表配置
  const optionUniversity = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      bottom: 0,
      icon: 'circle'
    },
    grid: {
      top:16,
      left: 0,
      right: 0,
      bottom: 40,
      containLabel: true
    },
    xAxis: [
      {
        axisLabel: {
          formatter: function (params) {
            let str = "";                 // 最终拼接成的字符串
            const paramsLen = params.length;// 获取每项文字的个数
            const len = 3;                  // 每行能显示的字的个数（根据实际情况自己设置）
            const rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
            if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
              for (let i = 0; i < rowNumber; i++) {
                let temp = "";            // 表示每一次截取的字符串
                const start = i * len;      // 开始截取的位置
                const end = start + len;    // 结束截取的位置
                if (i == rowNumber - 1) { // 最后一次不换行
                  temp = params.substring(start, paramsLen);
                } else {                  // 每一次拼接字符串并换行
                  temp = params.substring(start, end) + "\n";
                }
                str += temp;              // 最终拼成的字符串
              }
            } else {                      // 给新的字符串赋值
              str = params;
            }
            return str;                   //返回字符串
          }
        },
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: ['入职', '已转正', '已带课', '在岗未请长假', '在职', '待入职已签', '待入职待签','离职','劝退']
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color:"#A8C1F9"
          }
        }
      }
    ],
    series: [
      {
        name: 'C9',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: dataC9,
        barWidth: 20,
        itemStyle: {
          color:"#F9804E"
        }
      },
      {
        name: 'A类',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: dataTypeA,
        barWidth: 20,
        itemStyle: {
          color:"#15CD86"
        }
      },
      {
        name: 'B类',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: dataTypeB,
        barWidth: 20,
        itemStyle: {
          color:"#016FFC"
        }
      },
      {
        name: 'C类',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: dataTypeC,
        barWidth: 20,
        itemStyle: {
          color:"#FDB700"
        }
      }
    ]
  };
  setOptions(optionUniversity)
}

</script>

<style scoped lang="less">
.chart-mod{
  width: 604px;
  height: 50%;
}
</style>
